<template>
  <div id="ranking">
    <!-- <radio_group
      :radio_values="['行业排行榜', '地区排行榜']"
      v-model="value01"
      title="榜单"
      class="mb_10 mt_28"
    />-->
    <p class="data_time">
      <span>数据更新时间：</span
      ><span style="color:#888">{{ timestamp(time, "Y-M-D h:m") }}</span>
    </p>
    <!-- <radio_group
      v-if="
        value01 == '行业排行榜' && $store.state.classify_options.length != 0
      "
      :radio_values="$store.state.classify_options[0]"
      v-model="value08"
      title="行业"
      class
      isSearch="1"
    /> -->
    <category_industry :title="'行业'" v-model="industryItemObj"/>
    <radio_group
      v-show="value01 != '行业排行榜'"
      :radio_values="computed_province"
      v-model="value02"
      title="省份"
      class="mb_10"
    />
    <radio_group
      v-if="value01 != '行业排行榜' && value02"
      :radio_values="computed_citys"
      v-model="value03"
      title="地区"
      class="mb_10"
    />
    <section class="filter">
      <p>筛选</p>
      <el_select
        v-model="value04"
        title="粉丝总数"
        :options="[
          '不限',
          '10万-50万',
          '50万-100万',
          '100万-500万',
          '500万-1000万',
          '>1000万'
        ]"
      />
      <!-- :options="['不限','<1万','1万-10万','10万-50万','50万-100万','100万-500万','500万-1000万','>1000万']" /> -->
      <multi_select v-model="value05" :options="['是否带货']" />
    </section>
    <section class="type">
      <time_options
        v-model="value06"
        :radio_values="['日榜', '周榜', '月榜']"
      />
      <section class="input_group">
        <input
          type="text"
          v-model="input01"
          placeholder="请输入关键词在排行榜中搜索"
          @keyup.enter="search_input()"
        />
        <div @click="search_input()">
          <img src="../../../assets/meng/search01.png" />
        </div>
      </section>
      <div class="btn_group">
        <button @click="generatorImage">
          <img src="../../../assets/meng/star_map04.png" />分享
        </button>
        <button @click="export_data">
          <img src="../../../assets/meng/star_map05.png" />导出
        </button>
      </div>
    </section>
    <ul
      class="fixedThead"
      ref="fixedThead"
      :class="{ isShow: isFixed }"
      :style="showLeft == true ? 'left:222px' : 'left:98px'"
    >
      <li tc>排名</li>
      <li>达人</li>
      <li
        tc
        style="  cursor: pointer;"
        @click="sort_fun(false, 1)"
        v-if="
          order_by == 'desc' &&
            sort != '1' &&
            this.value06.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value06.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        粉丝总数
        <img
          src="@/assets/meng/down_up.png"
          v-if="order_by == 'desc' && sort == '1'"
        />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          order_by == 'desc' &&
            sort == '1' &&
            this.value06.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value06.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        粉丝总数
        <img
          src="@/assets/meng/down_up.png"
          v-if="order_by == 'desc' && sort == '1'"
        />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <!-- 预留 -->
      <li
        tc
        v-if="
          this.value06.split('?')[1] == '2021-04-01-2021-04-30' ||
            this.value06.split('?')[1] == '2021-03-01-2021-03-31'
        "
      >
        粉丝总数
      </li>
      <li
        tc
        @click="sort_fun(false, 2)"
        style="  cursor: pointer;"
        v-if="
          order_by == 'desc' &&
            sort != '2' &&
            this.value06.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value06.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        点赞增量
        <img
          src="@/assets/meng/down_up.png"
          v-if="order_by == 'desc' && sort == '2'"
        />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        v-if="
          order_by == 'desc' &&
            sort == '2' &&
            this.value06.split('?')[1] != '2021-04-01-2021-04-30' &&
            this.value06.split('?')[1] != '2021-03-01-2021-03-31'
        "
      >
        点赞增量
        <img
          src="@/assets/meng/down_up.png"
          v-if="order_by == 'desc' && sort == '2'"
        />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <!-- 预留 -->
      <li
        tc
        v-if="
          this.value06.split('?')[1] == '2021-04-01-2021-04-30' ||
            this.value06.split('?')[1] == '2021-03-01-2021-03-31'
        "
      >
        点赞增量
      </li>
      <li tc>评论增量</li>
      <li tc>转发增量</li>
      <li tc>操作</li>
    </ul>
    <table class="table" ref="capture">
      <thead>
        <tr>
          <th>排名</th>
          <th>达人</th>
          <th
            style="  cursor: pointer;"
            @click="sort_fun(false, 1)"
            v-if="
              order_by == 'desc' &&
                sort != '1' &&
                this.value06.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value06.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            粉丝总数
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == '1'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th
            v-if="
              order_by == 'desc' &&
                sort == '1' &&
                this.value06.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value06.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            粉丝总数
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == '1'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <!-- 预留 -->
          <th
            v-if="
              this.value06.split('?')[1] == '2021-04-01-2021-04-30' ||
                this.value06.split('?')[1] == '2021-03-01-2021-03-31'
            "
          >
            粉丝总数
          </th>
          <th
            @click="sort_fun(false, 2)"
            style="  cursor: pointer;"
            v-if="
              order_by == 'desc' &&
                sort != '2' &&
                this.value06.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value06.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            点赞增量
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == '2'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th
            v-if="
              order_by == 'desc' &&
                sort == '2' &&
                this.value06.split('?')[1] != '2021-04-01-2021-04-30' &&
                this.value06.split('?')[1] != '2021-03-01-2021-03-31'
            "
          >
            点赞增量
            <img
              src="@/assets/meng/down_up.png"
              v-if="order_by == 'desc' && sort == '2'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <!-- 预留 -->
          <th
            v-if="
              this.value06.split('?')[1] == '2021-04-01-2021-04-30' ||
                this.value06.split('?')[1] == '2021-03-01-2021-03-31'
            "
          >
            点赞增量
          </th>
          <th>评论增量</th>
          <th>转发增量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in table_data01"
          :key="'table' + index"
          :id="!index ? 'tr1' : ''"
        >
          <td class="td td_01">
            <div>
              <span>{{ item.rank }}</span>
              <section>
                <span class="new_font" v-if="item.isNew == 1">新进榜</span>
                <img
                  v-if="item.isNew == 0"
                  :class="{ gray_img: item.rankInc == 0 }"
                  :src="
                    '../../../../static/meng/fans0' +
                      (item.rankInc > 0 ? 2 : item.rankInc < 0 ? 3 : 1) +
                      '.png'
                  "
                />
                <span
                  :class="{
                    gray: item.rankInc == 0,
                    red: item.rankInc > 0,
                    blue: item.rankInc < 0
                  }"
                  v-if="item.isNew == 0"
                  >{{ Math.abs(item.rankInc) }}</span
                >
              </section>
            </div>
          </td>
          <td class="td td_02">
            <div>
              <img
                :src="item.logo"
                class="pointer"
                @click="go_to_page01(item.authorId)"
              />
              <section>
                <div>
                  <img
                    v-if="item.isShop == 1"
                    class="img01"
                    src="../../../assets/meng/search_result01.png"
                  />
                  <span
                    class="dot pointer"
                    @click="go_to_page01(item.authorId)"
                    >{{ item.nickName }}</span
                  >

                  <img
                    v-if="item.verifyType == 1"
                    src="../../../assets/meng/search_result02.png"
                  />
                  <img
                    v-if="item.verifyType == 2"
                    src="../../../assets/meng/search_result03.png"
                  />
                </div>
                <div class="dot">抖音号：{{ item.uniqueId }}</div>
              </section>
            </div>
          </td>
          <!-- <td class="td td_03">
            <div>{{ format_num(item.hint) }}</div>
          </td>-->
          <td class="td td_04">
            <div>{{ format_num(item.totalFans) }}</div>
          </td>
          <td class="td td_05">
            <div>{{ format_num(item.favoriteIncr) }}</div>
          </td>
          <td class="td td_06">
            <div>{{ format_num(item.commentIncr) }}</div>
          </td>
          <td class="td td_07">
            <div>{{ format_num(item.shareIncr) }}</div>
          </td>
          <td class="td td_08">
            <button @click="go_to_page01(item.authorId)">查看详情</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="upgradeBox" v-if="!permissions">
      <RankUpgrade class="rankUpgrade" />
    </div>
    <p
      class="nothing"
      v-show="
        table_data01.length < 30 &&
          !loading &&
          permissions &&
          table_data01.length != 0
      "
    >
      我是有底线的～
    </p>
    <div
      class="pageBox"
      v-if="(!loading && table_data01.length != 0) || !permissions"
    >
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="count"
        :page-size="30"
        :current-page="page"
        @current-change="get_data"
        :hide-on-single-page="true"
      ></el-pagination>
    </div>
    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>

    <div
      class="empty"
      v-show="!loading && table_data01.length == 0 && permissions"
    >
      <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import RankUpgrade from "@/component/rankUpgrade.vue";
import category_industry from '@/component/category_industry.vue';
export default {
  name: "ranking",
  data() {
    let that = this;
    return {
      permissions: 1,
      busy: false,
      loading: true,
      table_data01: [],
      page: 1,
      count: 0,
      cancel: null,
      input01: "",
      value01: "行业排行榜",
      value02: "",
      value03: "全部",
      value04: "不限",
      value05: "",
      value06: "日榜",
      time_options: [],
      showLeft: true,
      isFixed: false,
      offsetTop: 0,
      time: "",
      order_by: "desc", //   表格头部排序
      sort: 1, //   表格头部排序
      industryItemObj:{
        name:'全部',
        id:'0'
      }
    };
  },
  components: { RankUpgrade ,category_industry},
  computed: {
    computed_province() {
      let arr = this.$store.state.province_city.map((item, index) => {
        return item.name;
      });
      return arr;
    },
    computed_citys() {
      let arr = this.$store.state.province_city.filter((item, index) => {
        if (item.name == this.value02) {
          return item;
        }
      });
      return arr[0].city;
    },
    listen_change() {
      const {
        value01,
        value02,
        value03,
        value04,
        value05,
        value06,
        industryItemObj
      } = this;
      return {
        value01,
        value02,
        value03,
        value04,
        value05,
        value06,
        industryItemObj
      };
    }
  },
  watch: {
    "$store.state.left_nav_flag"(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    window.addEventListener("resize", () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },
  created: function() {
    // if (this.$route.params.index) this.value08 = this.$route.params.index;
    if (this.$route.params.p3) this.value06 = this.$route.params.p3;
    this.value02 = this.computed_province[0];
    this.$watch("value02", function(newValue, oldValue) {
      this.value03 = "全部";
    });

    // this.get_data() 因为time_options组件内部已经提交新值，导致v-model的值更改，所以已经执行请求函数
    this.$watch(
      "listen_change",
      this.debounce((newValue, oldValue) => {
        this.page = 1;
        this.loading = true;
        this.table_data01 = [];
        this.get_data();
      }, 0)
    );
  },
  methods: {
    //   表格头部排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = "asc";
      } else {
        this.order_by = "desc";
      }
      switch (parm02) {
        case 1:
          this.sort = 1;
          break;
        case 2:
          this.sort = 2;
          break;
        case 3:
          this.sort = 3;
          break;
      }
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector("#tr1");
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);

          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + "px";
          }
        }
      });
    },
    search_input() {
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    },

    get_data(cpage) {
      let that = this;
      this.table_data01 = [];
      if (cpage) {
        that.page = cpage;
        that.backTop();
      }
      this.loading = true;
      this.busy = true;
      this.permissions = 1;
      let fans;
      switch (this.value04) {
        case "不限":
          fans = 0;
          break;
        case "<1万":
          fans = 1;
          break;
        case "1万-10万":
          fans = 2;
          break;
        case "10万-50万":
          fans = 3;
          break;
        case "50万-100万":
          fans = 4;
          break;
        case "100万-500万":
          fans = 5;
          break;
        case "500万-1000万":
          fans = 6;
          break;
        case ">1000万":
          fans = 7;
          break;
      }

      let provinceId;
      let cityId;
      this.$store.state.province_city.map((item, index) => {
        if (item.name == this.value02) {
          provinceId = item.pid;
          cityId = item.cid[item.city.indexOf(this.value03)];
        }
      });

      this.$axios
        .post(
          "/fansRankTrade",
          {
            listtype: that.value01 == "行业排行榜" ? 3 : 4,
            category: this.industryItemObj.id,
            rankType:
              that.value06.split("?")[0] == "日榜"
                ? 1
                : that.value06.split("?")[0] == "周榜"
                ? 2
                : 3,
            fans,
            cityId,
            provinceId,
            isshop: that.value05 != "" ? 1 : 0,
            date:
              that.value06.split("?")[1].length == 10
                ? that.value06.split("?")[1]
                : that.value06.split("?")[1].slice(11),
            key: this.trimStr(that.input01),
            pagesize: 30,
            pageindex: that.page,
            SortType:
              this.value06.split("?")[1] == "2021-04-01-2021-04-30" ||
              this.value06.split("?")[1] == "2021-03-01-2021-03-31"
                ? 1
                : that.sort
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel) that.cancel();
              that.cancel = c;
            })
          }
        )
        .then(response => {
          this.loading = false;
          if (response.data.code == 0) {
            this.table_data01 = response.data.data.list;
            this.time = response.data.data.timeUnix;
            response.data.data.length < 30
              ? (this.busy = true)
              : (this.busy = false);

            that.count = response.data.count;
          }
          if (response.data.code == 1013) {
            this.permissions = 0;
            this.table_data01 = [];
          } else {
            this.permissions = 1;
          }
          this.setTBBar();
        })
        .catch(error => {
          console.log(error);
        });
    },
    generatorImage() {
      var that = this;
      const loading = this.$loading({
        lock: true,
        text: "导出中...",
        spinner: "el-icon-loading",
        customClass: "customClass"
      });
      var shareContent;
      shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true //日志开关
      };
      html2canvas(shareContent, opts).then(canvas => {
        let str;
        str = `《行业排行榜-${that.value06.split("?")[1]}》.png`;
        canvas.toBlob(
          function(blob) {
            const eleLink = document.createElement("a");
            eleLink.download = str;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          "image/png",
          1
        );
        loading.close();
      });
    },
    export_data() {
      let that = this;
      let str = `排名,排名变动,达人,抖音号,粉丝总数,点赞增量,评论增量,转发增量\n`;
      for (let i = 0; i < that.table_data01.length; i++) {
        str += `${that.table_data01[i].rank},${
          that.table_data01[i].rankInc
        },\"${that.table_data01[i].nickName.replace(/"/g, '""')}\",${
          that.table_data01[i].uniqueId
        }\t,${that.format_num(
          that.table_data01[i].totalFans
        )},${that.format_num(
          that.table_data01[i].favoriteIncr
        )},${that.format_num(
          that.table_data01[i].commentIncr
        )},${that.format_num(that.table_data01[i].shareIncr)}\n`;
      }
      var blob = new Blob([str], { type: "text/plain;charset=utf-8" }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement("a");
      link.href = object_url;
      let str_name = `《行业排行榜-${
        that.value06.split("?")[1]
      }》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    loadMore: function() {
      if (this.page == 31) {
        return false;
      }
      this.get_data();
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, "_blank");
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > 300 ? true : false;
    }
  }
};
</script>
<style scoped lang="less">
#ranking {
  padding-bottom: 1px;
  min-height: 100vh;
  .data_time {
    margin-top: -62px;
    margin-bottom: 32px;
    margin-right: -15px;
    text-align: right;
    > span:first-child {
      font-size: 14px;
      color: #888888;
      // margin-right: 9px;
      letter-spacing: 0;
    }
    > span:last-child {
      font-size: 15px;
      // font-family: DINAlternate-Bold;
      letter-spacing: 0;
    }
  }
  .table {
    thead {
      tr {
        th:nth-child(2) {
          text-align: left;
          padding-left: 10px;
        }
      }
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
    }
    .tip_img {
      width: 16px;
      height: 16px;
      vertical-align: -3px;
    }
    tbody {
      tr {
        height: 80px;
      }
    }
    .td_08 {
      text-align: center;
      button {
        width: 88px;
        height: 32px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 30px;
        letter-spacing: 0px;
        color: #ffffff;
        text-align: center;
      }
      button:hover {
        background-color: #ff924b;
      }
    }
    .td_01,
    .td_05,
    .td_06,
    .td_07,
    .td_03,
    .td_04 {
      font-size: 15px;
      font-family: DINAlternate-Bold;
    }
    .td_02 {
      width: 40%;
      > div {
        justify-content: flex-start !important;
        section {
          width: 210px;
          > div:first-child {
            display: flex;
            align-items: center;
            > span {
              width: auto;
              max-width: 100%;
              word-break: break-all;
              font-size: 14px;
              font-weight: 600;
              color: #222222;
              margin-bottom: 5px;
            }
            > span:hover {
              color: #1779ff;
            }
            .img01 {
              margin-right: 6px;
              margin-left: 0;
              margin-top: -5px;
            }
            img {
              margin-top: -3px;
              width: 14px;
              height: 14px;
              margin-left: 6px;
            }
          }
          > div:last-child {
            width: 100%;
            word-break: break-all;
            font-size: 14px;
            color: #888;
          }
        }
        > img {
          border-radius: 50%;
          width: 50px;
          margin-right: 12px;
          border: 1px solid #e5e5e5;
        }
      }
    }
    .td_01 {
      width: 173px;
      > div {
        font-family: DINAlternate-Bold;
        display: flex;
        align-items: center;
        > span:first-child {
          display: inline-block;
          width: 60px;
          font-size: 15px;
          text-align: right;
        }
        > section {
          width: 90px;
          .new_font {
            font-size: 16px;
            color: #fd7f2c;
            margin-left: 8px;
            vertical-align: 3px;
          }
          img {
            width: 8px;
            height: 12px;
            margin-top: -3px;
            margin-left: 8px;
            margin-right: 6px;
          }
          span {
            font-size: 16px;
            vertical-align: 1px;
          }
          .gray_img {
            width: 12px !important;
            height: 8px !important;
            margin-left: 6px !important;
            margin-right: 4px !important;
          }
        }
      }
    }
    .td {
      > div {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .type {
    margin-top: 14px;
    margin-bottom: 14px;
    > div {
      display: inline-block;
    }
    .input_group {
      display: inline-block;
      margin-left: 14px;
      position: relative;
      width: 308px;
      height: 32px;
      border-radius: 4px 4px 4px 4px;
      border: solid 1px #e5e5e5;
      box-sizing: border-box;
      input {
        width: 100%;
        font-size: 14px;
        vertical-align: -1px;
        color: #222;
        height: 100%;
        box-sizing: border-box;
        padding-left: 11px;
        padding-right: 38px;
        border: none;
      }
      input::-webkit-input-placeholder {
        color: #b5b5b5 !important;
      }
      > div {
        position: absolute;
        right: 0;
        cursor: pointer;
        top: -1px;
        text-align: center;
        width: 38px;
        height: 32px;
        background-color: #1779ff;
        border-radius: 0px 4px 4px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 15px;
        }
      }
    }
    .btn_group {
      text-align: right;
      float: right;
      button {
        width: 80px;
        height: 32px;
        border-radius: 4px;
        border: solid 1px #e6e6e6;
        font-size: 14px;
        // line-height: 30px;
        box-sizing: border-box;
        color: #222222;
        text-align: center;
      }
      > button:nth-child(1) {
        margin-right: 10px;
        img {
          width: 13px;
          vertical-align: -2px;
          margin-right: 6px;
        }
      }
      > button:nth-child(2) {
        img {
          width: 14px;
          vertical-align: -1px;
          margin-right: 6px;
        }
      }
    }
  }
  .filter {
    display: flex;
    align-items: center;
    > p:first-child {
      font-size: 14px;
      color: #888888;
      margin-right: 20px;
      line-height: 32px;
      white-space: nowrap;
      color: #555;
    }
    #el_select {
      margin-right: 30px;
    }
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .fixedThead {
    display: none;
    position: fixed;
    top: 60px;
    left: 200px;

    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    background-color: #f5f9ff;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    z-index: 99;
    font-size: 0;
    li {
      box-sizing: border-box;
      display: inline-block;
      font-size: 14px;
    }

    &.isShow {
      display: block;
    }
    img {
      width: 5px;
      height: 10px;
      vertical-align: 0;
    }
  }
  [tc] {
    text-align: center;
  }
  [tl] {
    text-align: left;
  }
  [tr] {
    text-align: right;
  }
}
</style>
